<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<script type="text/babel">
//基础渲染
var names = ['Tom','Jack','Bob'];
ReactDOM.render(
    <ul>
    	{
    		names.map((item,index) => {
    			return <li key={index}>{index + '--' + item}</li>
    		})
    	}
    </ul>,
    document.getElementById('example')
);

//创建组件
//构造函数
function MyComponent1(){
	return <h2>构造函数自定义组件</h2>
}
//类
class MyComponent2 extends React.Component{
	render(){
		return <h2>类自定义组件</h2>
	}
}
//es5老语法（直接报错）
// var MyComponent3 = React.createClass({
// 	render:function(){
// 		return <h2>老语法自定义组件</h2>
// 	}
// })

//渲染
ReactDOM.render(<MyComponent1 />,document.getElementById("example1"))
ReactDOM.render(<MyComponent2 />,document.getElementById("example2"))
//ReactDOM.render(<MyComponent3 />,document.getElementById("example3"))
</script>
<script>
//js类
class Person{
	constructor(name,age){
		this.name = name;
		this.age = age;
		this.state = 'normal';
	}
}
class HaHa extends Person{
	constructor(name,age,xxx){
		super();//调用父类的构造方法
		this.name = name;
		this.age = age;
		this.xxx = xxx;
	}
	showName(){
		console.log("NAME:",this.name)
	}
}
let haha = new HaHa('haha',null,888);
console.log(haha)
haha.showName()
</script>
</body>
</html>